<template>
  <div class="home">
	<div class="col-main">
		<div class="col-cen">
			<div class="new-tab-ul">
				<div :class="tabActive == item.value ? 'new-tab-active new-tab-ul-li' : 'new-tab-ul-li'" 
				v-for="(item,index) in tabOptons" :key="index" @click="tabTab(item.value)">{{ item.label }}</div>
			</div>
		</div>
		<div class="col-left">
			<div v-if="tabActive == 0">
				<div class="new-li">
					<div class="new-li-head">
						<img class="nl-head-img" src="https://wx4.sinaimg.cn/orj360/9461d9fcly1i083zgfmaqj20wi0ycdi0.jpg" alt="">
						<p class="nl-head-h2">小迷妹神吐槽</p>
						<p class="nl-head-time">
							<span>2025-4-7</span>
							<span>美食博主</span>
							<span>技术博主</span>
						</p>
						<el-button class="nl-head-follow" round>+ 关注</el-button>
					</div>
					<div class="new-li-info">见过明星街拍没见过这么降维打击的，智界R7的白色内饰简直就是反光板，衬得刘亦菲整个人在发光，增程Ultra版的优秀更是直接吸引住我了，这换谁来也得拜倒在智界R7的“石榴裙”下，这波跨界合作直接给汽车营销上了教科书级别的一课。</div>
					<div class="new-li-img">
						<div class="nl-img"><img src="https://wx4.sinaimg.cn/orj360/9461d9fcly1i083zgfmaqj20wi0ycdi0.jpg"></div>
						<div class="nl-img"><img src="https://wx4.sinaimg.cn/orj360/899637f2ly1i0842uy5kgj20wi13utbv.jpg"></div>
						<div class="nl-img"><img src="https://wx2.sinaimg.cn/orj360/899637f2ly1i0842v772dj20wi1g6jut.jpg"></div>
					</div>
					<div class="new-li-statistics">
						<p class="nl-span" title="转发"><i class="iconfont icon-zhuanfa"></i>100</p>
						<p class="nl-span" title="查看"><i class="iconfont icon-pinglunxiao"></i>100</p>
						<p class="nl-span" title="点赞"><i class="iconfont icon-dianzan" style="font-size: 20px;"></i>100</p>
						<p class="nl-span" title="关注"><i class="iconfont icon-shoucang1"></i>100</p>
					</div>
				</div>
				<div class="new-li">
					<div class="new-li-head">
						<img class="nl-head-img" src="https://tvax4.sinaimg.cn/crop.0.0.600.600.180/008x5fvJly8hkjxakp26mj30go0gogms.jpg?KID=imgbed,tva&Expires=1744028319&ssig=El8GriOKu5" alt="">
						<p class="nl-head-h2">炎之西</p>
						<p class="nl-head-time">
							<span>2025-4-7</span>
							<span>美食博主</span>
							<span>技术博主</span>
						</p>
						<el-button class="nl-head-follow" round>+ 关注</el-button>
					</div>
					<div class="new-li-info">见过明星街拍没见过这么降维打击的，智界R7的白色内饰简直就是反光板，衬得刘亦菲整个人在发光，增程Ultra版的优秀更是直接吸引住我了，这换谁来也得拜倒在智界R7的“石榴裙”下，这波跨界合作直接给汽车营销上了教科书级别的一课。</div>
					<div class="new-li-video">
						<video class="video-player" src="https://mz-demo-assets.tecmz.com/data/video/2021/12/08/49836_mtut_7135.mp4" :autoplay="false" controls></video>
					</div>
					<div class="new-li-statistics">
						<p class="nl-span" title="转发"><i class="iconfont icon-zhuanfa"></i>100</p>
						<p class="nl-span" title="查看"><i class="iconfont icon-pinglunxiao"></i>100</p>
						<p class="nl-span" title="点赞"><i class="iconfont icon-dianzan" style="font-size: 20px;"></i>100</p>
						<p class="nl-span" title="关注"><i class="iconfont icon-shoucang1"></i>100</p>
					</div>
				</div>
			</div>
			<div v-if="tabActive == 1">
				<div class="new-li">
					<div class="new-li-head">
						<img class="nl-head-img" src="https://tvax4.sinaimg.cn/crop.0.0.600.600.180/008x5fvJly8hkjxakp26mj30go0gogms.jpg?KID=imgbed,tva&Expires=1744028319&ssig=El8GriOKu5" alt="">
						<p class="nl-head-h2">炎之西</p>
						<p class="nl-head-time">
							<span>2025-4-7</span>
							<span>美食博主</span>
							<span>技术博主</span>
						</p>
						<!-- <el-button class="nl-head-follow" round>+ 关注</el-button> -->
					</div>
					<div class="new-li-info">见过明星街拍没见过这么降维打击的，智界R7的白色内饰简直就是反光板，衬得刘亦菲整个人在发光，增程Ultra版的优秀更是直接吸引住我了，这换谁来也得拜倒在智界R7的“石榴裙”下，这波跨界合作直接给汽车营销上了教科书级别的一课。</div>
					<div class="new-li-video">
						<video class="video-player" src="https://mz-demo-assets.tecmz.com/data/video/2021/12/08/49836_mtut_7135.mp4" :autoplay="false" controls></video>
					</div>
					<div class="new-li-statistics">
						<p class="nl-span" title="转发"><i class="iconfont icon-zhuanfa"></i>100</p>
						<p class="nl-span" title="查看"><i class="iconfont icon-pinglunxiao"></i>100</p>
						<p class="nl-span" title="点赞"><i class="iconfont icon-dianzan" style="font-size: 20px;"></i>100</p>
						<p class="nl-span" title="关注"><i class="iconfont icon-shoucang1"></i>100</p>
					</div>
				</div>
			</div>
			<div v-if="tabActive == 2">
				<div class="new-li">
					<div class="new-li-head">
						<img class="nl-head-img" src="https://wx4.sinaimg.cn/orj360/9461d9fcly1i083zgfmaqj20wi0ycdi0.jpg" alt="">
						<p class="nl-head-h2">小迷妹神吐槽</p>
						<p class="nl-head-time">
							<span>2025-4-7</span>
							<span>美食博主</span>
							<span>技术博主</span>
						</p>
						<el-button class="nl-head-follow-yes" round>已关注</el-button>
					</div>
					<div class="new-li-info">见过明星街拍没见过这么降维打击的，智界R7的白色内饰简直就是反光板，衬得刘亦菲整个人在发光，增程Ultra版的优秀更是直接吸引住我了，这换谁来也得拜倒在智界R7的“石榴裙”下，这波跨界合作直接给汽车营销上了教科书级别的一课。</div>
					<div class="new-li-img">
						<div class="nl-img"><img src="https://wx4.sinaimg.cn/orj360/9461d9fcly1i083zgfmaqj20wi0ycdi0.jpg"></div>
						<div class="nl-img"><img src="https://wx4.sinaimg.cn/orj360/899637f2ly1i0842uy5kgj20wi13utbv.jpg"></div>
						<div class="nl-img"><img src="https://wx2.sinaimg.cn/orj360/899637f2ly1i0842v772dj20wi1g6jut.jpg"></div>
					</div>
					<div class="new-li-statistics">
						<p class="nl-span" title="转发"><i class="iconfont icon-zhuanfa"></i>100</p>
						<p class="nl-span" title="查看"><i class="iconfont icon-pinglunxiao"></i>100</p>
						<p class="nl-span" title="点赞"><i class="iconfont icon-dianzan" style="font-size: 20px;"></i>100</p>
						<p class="nl-span" title="关注"><i class="iconfont icon-shoucang1"></i>100</p>
					</div>
				</div>
			</div>
			<div v-if="tabActive == 3">
				<bzView />
			</div>
			<div v-if="tabActive == 4">
				要闻
			</div>
		</div>
		<div class="col-right">
			<!-- <div style="padding: 20px 0 15px;">百度热搜</div> -->
			<div class="new-right">
				<!-- <iframe id="frame1" src="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" frameborder="0" scrolling="no" style="width: 600px; height: 670px; overflow: hidden;"></iframe> -->
				<div class="new-right-top">
					百度热搜 <i class="iconfont icon-resou"></i>
					<p @click="baiduList" style="float: right; font-size: 12px; color: #666; cursor: pointer;"><i style="font-size: 14px; color: #666; margin-right: 5px;" class="iconfont icon-shuaxin"></i>刷新</p>
				</div>
				<a :href="item.url" target="_blank" class="new-right-li" v-for="(item,index) in bdData" :key="index">
					<p>
						<i v-if="index == 0" class="iconfont icon-remen-05" style="color: red;"></i>
						<span v-else style="padding-right: 5px;">{{ index }}</span>
						{{item.title}}
					</p>
					<img :src="item.pic" style="" alt="">
				</a>
			</div>
		</div>
	</div>
  </div>
</template>

<script setup>
	import axios from 'axios';
	import bzView from "./components/bzView.vue";
	import { reactive, toRefs, onMounted } from 'vue';
	const data = reactive({
		tabActive: 0,
		tabOptons: [
			{value: 0, label: '全部'},
			{value: 1, label: '我发的'},
			{value: 2, label: '我关注的'},
			{value: 3, label: 'B站热搜'},
			{value: 4, label: '要闻'}
		],
		bdData: [],
	})
	const { 
		tabActive, 
		tabOptons,
		bdData,
	} = toRefs(data);
	document.title = '首页';
	const head = document.head;
	const keywordsMeta = document.querySelector('meta[name="keywords"]');
	keywordsMeta.content = "斌味十足的跟博客,前端交流,vue,uniapp,安卓,ios";
	onMounted(() => {
		
	})
	// 左侧菜单切换
	function tabTab(val) {
		this.tabActive = val;
	}
	// 百度热搜获取
	function baiduList() {
		axios({
		    method:"GET",
		    url: 'http://zj.v.api.aa1.cn/api/baidu-rs/',
		    data: {},
		    headers: {
		        'Content-Type': 'application/json',
		    }
		})
		.then(res => {
			data.bdData = res.data.slice(0, 10);
		})
		.catch(error => {
		    console.error("There was an error!", error);
		});
	}
	baiduList();
</script>
<style lang="less" scoped>
.col-left {
	float: left;
	width: 660px;
	margin-left: 190px;
}
.col-cen {
	float: left;
	width: 180px;
}
.col-right {
	width: 340px;
	float: right;
}

#frame1{ 
	position:relative;
	z-index: 1; 
	margin-top: -210px;
	margin-left: -172px;
}
</style>
